<!-- 评论模块 -->
<section id="comments" class="py-16 bg-white">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center max-w-2xl mx-auto mb-12">
      <div class="inline-block px-4 py-1 bg-primary/10 text-primary rounded-full text-sm font-medium mb-4">
        <?= $data['content']['sectionBadge'] ?>
      </div>
      <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-4">
        <?= $data['content']['sectionTitle'] ?>
      </h2>
      <p class="text-dark/70">
        <?= $data['content']['sectionSubtitle'] ?>
      </p>
    </div>
    
    <div class="max-w-4xl mx-auto">
      <!-- 评论列表 -->
      <div class="space-y-8 mb-12">
        <!-- 评论1 -->
        <div class="bg-light p-6 rounded-xl">
          <div class="flex items-start mb-4">
            <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
              <img src="images/avatar-2.png" alt="用户头像" class="w-full h-full object-cover">
            </div>
            <div class="flex-1">
              <div class="flex justify-between items-center mb-1">
                <h4 class="font-bold">李女士</h4>
                <span class="text-sm text-dark/50">2023-11-15</span>
              </div>
              <div class="flex mb-2">
                <i class="fa fa-star text-yellow-400"></i>
                <i class="fa fa-star text-yellow-400"></i>
                <i class="fa fa-star text-yellow-400"></i>
                <i class="fa fa-star text-yellow-400"></i>
                <i class="fa fa-star text-yellow-400"></i>
              </div>
              <p class="text-dark/70">
                非常专业的团队，从需求分析到系统上线全程都很顺畅，解决了我们企业长期存在的效率问题。客服响应也很及时，有问题能第一时间得到解决。
              </p>
            </div>
          </div>
          <div class="flex items-center text-sm text-dark/50">
            <button class="flex items-center hover:text-primary transition-custom mr-6">
              <i class="fa fa-thumbs-up mr-1"></i> <span>32</span>
            </button>
            <button class="flex items-center hover:text-primary transition-custom">
              <i class="fa fa-comment-o mr-1"></i> <span>回复</span>
            </button>
          </div>
        </div>
        
        <!-- 评论2 -->
        <div class="bg-light p-6 rounded-xl">
          <div class="flex items-start mb-4">
            <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
              <img src="images/avatar-3.png" alt="用户头像" class="w-full h-full object-cover">
            </div>
            <div class="flex-1">
              <div class="flex justify-between items-center mb-1">
                <h4 class="font-bold">王先生</h4>
                <span class="text-sm text-dark/50">2023-10-28</span>
              </div>
              <div class="flex mb-2">
                <i class="fa fa-star text-yellow-400"></i>
                <i class="fa fa-star text-yellow-400"></i>
                <i class="fa fa-star text-yellow-400"></i>
                <i class="fa fa-star text-yellow-400"></i>
                <i class="fa fa-star-half-o text-yellow-400"></i>
              </div>
              <p class="text-dark/70">
                系统功能很完善，界面设计也很友好，员工上手很快。数据分析功能对我们的业务决策帮助很大，能够实时了解业务状况。唯一的小问题是上线初期有一些小bug，但技术团队很快就解决了。
              </p>
            </div>
          </div>
          <div class="flex items-center text-sm text-dark/50 mb-4">
            <button class="flex items-center hover:text-primary transition-custom mr-6">
              <i class="fa fa-thumbs-up mr-1"></i> <span>28</span>
            </button>
            <button class="flex items-center hover:text-primary transition-custom">
              <i class="fa fa-comment-o mr-1"></i> <span>回复</span>
            </button>
          </div>
          
          <!-- 官方回复 -->
          <div class="pl-16 pr-4 py-4 bg-white rounded-lg">
            <div class="flex items-start mb-2">
              <div class="w-8 h-8 rounded-full overflow-hidden mr-3">
                <img src="images/logo-small.png" alt="官方头像" class="w-full h-full object-contain">
              </div>
              <div class="flex-1">
                <div class="flex justify-between items-center mb-1">
                  <h5 class="font-bold text-primary">智联科技官方</h5>
                  <span class="text-xs text-dark/50">2023-10-29</span>
                </div>
                <p class="text-dark/70 text-sm">
                  感谢您的反馈和理解！我们一直在努力提升产品质量和服务体验，对于上线初期出现的问题，我们深表歉意。我们会继续优化产品，为您提供更好的服务。如有其他问题，欢迎随时联系我们。
                </p>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 评论3 -->
        <div class="bg-light p-6 rounded-xl">
          <div class="flex items-start mb-4">
            <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
              <img src="images/avatar-4.png" alt="用户头像" class="w-full h-full object-cover">
            </div>
            <div class="flex-1">
              <div class="flex justify-between items-center mb-1">
                <h4 class="font-bold">张女士</h4>
                <span class="text-sm text-dark/50">2023-10-10</span>
              </div>
              <div class="flex mb-2">
                <i class="fa fa-star text-yellow-400"></i>
                <i class="fa fa-star text-yellow-400"></i>
                <i class="fa fa-star text-yellow-400"></i>
                <i class="fa fa-star text-yellow-400"></i>
                <i class="fa fa-star-o text-yellow-400"></i>
              </div>
              <p class="text-dark/70">
                整体来说还是很满意的，系统稳定，功能实用。培训做得很到位，我们的员工很快就掌握了操作方法。希望以后能增加更多自定义报表功能，满足我们的特殊需求。
              </p>
            </div>
          </div>
          <div class="flex items-center text-sm text-dark/50">
            <button class="flex items-center hover:text-primary transition-custom mr-6">
              <i class="fa fa-thumbs-up mr-1"></i> <span>22</span>
            </button>
            <button class="flex items-center hover:text-primary transition-custom">
              <i class="fa fa-comment-o mr-1"></i> <span>回复</span>
            </button>
          </div>
        </div>
      </div>
      
      <!-- 分页 -->
      <div class="flex justify-center mb-12">
        <nav class="inline-flex rounded-md shadow-sm" aria-label="评论分页">
          <a href="#" class="px-3 py-2 text-sm font-medium text-dark/50 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-50 transition-custom">
            <i class="fa fa-chevron-left"></i>
          </a>
          <a href="#" class="px-3 py-2 text-sm font-medium text-white bg-primary border border-primary">1</a>
          <a href="#" class="px-3 py-2 text-sm font-medium text-dark/70 bg-white border border-gray-300 hover:bg-gray-50 transition-custom">2</a>
          <a href="#" class="px-3 py-2 text-sm font-medium text-dark/70 bg-white border border-gray-300 hover:bg-gray-50 transition-custom">3</a>
          <span class="px-3 py-2 text-sm font-medium text-dark/50 bg-white border border-gray-300">...</span>
          <a href="#" class="px-3 py-2 text-sm font-medium text-dark/70 bg-white border border-gray-300 hover:bg-gray-50 transition-custom">10</a>
          <a href="#" class="px-3 py-2 text-sm font-medium text-dark/70 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-50 transition-custom">
            <i class="fa fa-chevron-right"></i>
          </a>
        </nav>
      </div>
      
      <!-- 发表评论 -->
      <div class="bg-light p-6 rounded-xl">
        <h3 class="text-xl font-bold mb-6">发表评论</h3>
        <form class="space-y-6">
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <label for="name" class="block text-sm font-medium text-dark/70 mb-1">您的姓名</label>
              <input 
                type="text" 
                id="name" 
                class="w-full px-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary" 
                placeholder="请输入您的姓名"
              >
            </div>
            <div>
              <label for="email_comment" class="block text-sm font-medium text-dark/70 mb-1">电子邮箱</label>
              <input 
                type="email" 
                id="email_comment" 
                class="w-full px-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary" 
                placeholder="请输入您的电子邮箱"
              >
            </div>
          </div>
          
          <div>
            <label class="block text-sm font-medium text-dark/70 mb-2">您的评分</label>
            <div class="flex space-x-1 rating-stars">
              <i class="fa fa-star text-2xl text-gray-300 cursor-pointer hover:text-yellow-400 transition-custom"></i>
              <i class="fa fa-star text-2xl text-gray-300 cursor-pointer hover:text-yellow-400 transition-custom"></i>
              <i class="fa fa-star text-2xl text-gray-300 cursor-pointer hover:text-yellow-400 transition-custom"></i>
              <i class="fa fa-star text-2xl text-gray-300 cursor-pointer hover:text-yellow-400 transition-custom"></i>
              <i class="fa fa-star text-2xl text-gray-300 cursor-pointer hover:text-yellow-400 transition-custom"></i>
            </div>
          </div>
          
          <div>
            <label for="comment" class="block text-sm font-medium text-dark/70 mb-1">评论内容</label>
            <textarea 
              id="comment" 
              rows="4" 
              class="w-full px-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary" 
              placeholder="请输入您的评论内容..."
            ></textarea>
          </div>
          
          <button type="submit" class="px-6 py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-custom font-medium">
            提交评论
          </button>
        </form>
      </div>
    </div>
  </div>
</section>